/// src下用前端模块化-webpack会翻译
import $ from 'jquery'

$("#myUL>li:even").css("color", "red")
$("#myUL>li:odd").css("color", "green")

// 3.3 - 在src下万物皆模块 (前端模块化开发, 包括css等文件)
// webpack默认只认识js和json类型文件, 其余一概不认识
// 下style-loader和css-loader
import "./css/index.css" // 准备被webpack打包进js中, 应用到打包后html文件中

// console.log(abc);

// 3.4 - 引入less文件
// 下less less-loader
// 配置到webpack.config.js
// 准备less代码并引入
// 打包观察less样式生效在html页面中
import "./less/index.less"

// 3.5 - 引入图片文件, 在body上用img标签显示一下
// 把图片文件当成模块导入过来 (万物皆模块)
import imgObj from './assets/1.gif' // imgObj变量保存的就是图片对象
const theImg = document.createElement("img")
theImg.src = imgObj
document.body.append(theImg)

// 3.6 - webpack打包字体文件(.eot/.svg/.ttf/.woff/.woff2)
// (1): src/assets中准备了字体图标文件和字体样式css
// (2): 引用关系(必须跟入口文件产生直接/间接引用关系才会被打包)
// main.js > 引入iconfont.css > 字体文件
import "./assets/fonts/iconfont.css" // 字体样式引入

// 字体文件, 图片, 音频, 视频都叫静态文件, 都可以用url-loader和file-loader解析
// 文件能直接使用的, 都可以用url-loader和file-loader解析
// (3): public/index.html中使用i标签加载字体图标类名
// (4): webpack配置中, 对字体文件用url-loader解析
// (5): webpack打包 ,运行打包后的html文件观察字体样式生效


// 3.7 高版本js语法降级处理
// webpack集成babel能力
// bablejs官网: https://www.babeljs.cn/ - js编译器降级js语法
const fn = () => { console.log("这是一个箭头函数"); }
console.log(fn);

console.log("新写了一行代码");

import App from './App.vue'

import Vue from 'vue' // 引入vue.js对象


new Vue({
    el: "#app", // 把vue文件的标签结构 -> 挂载到id为app的标签里
    render: (h) => h(App) // id叫app位置替换成App组件里标签
})